<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="back">后退</button>
    <button class="forward">前进</button>
    <script>
        /* 
         ## histroy对象
                Window.history 是一个只读属性，history用来获取对象的引用，对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口
                go：加载history具体页面
                back：返回到历史列表当前url的上一个url
                forward：加载历史列表中当前url的下一个url
                length：返回历史列表的url长度信息
        */
        const forward = document.querySelector(".forward")
        const back = document.querySelector(".back")

        back.addEventListener("click", function () {
            // history.back()
            history.go(-1)
        })

        forward.addEventListener("click", function () {
            // history.forward()
            history.go(1)
        })
        console.log(history.length);
    </script>
</body>

</html>